<template>
  <div class="FirstMenuView">
    <div class="contentShow">
      <router-view></router-view>
    </div>
    <!--菜单栏部分-->
    <van-tabbar v-model="active" class="menu">
      <template v-for="item in menuMain">
        <van-col :span="6">
          <router-link :to="item.router">
            <van-tabbar-item :icon="item.icon" :key="item.id">{{ item.text }}</van-tabbar-item>
          </router-link>
        </van-col>
      </template>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "FirstMenuView",
  components: {},
  data() {
    return {
      active: 0,
      menuMain: [{id: 1, icon: 'wap-home-o', text: '首页', router: '/frontPage'},
        {id: 2, icon: 'orders-o', text: '病历本', router: '/medicalHistory'},
        {id: 3, icon: 'chat-o', text: '消息', router: '/information'},
        {id: 4, icon: 'user-circle-o', text: '我', router: '/my'},
      ],
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped lang="less">
.contentShow {
  margin-bottom: 50px;
}

.menu {
  display: flex;
  align-items: center;
}
</style>
